<template>
  <div>
    <el-drawer
      v-bind="$attrs"
      v-on="$listeners"
      :with-header="false"
      size="75%"
      @open="onOpen"
      @close="onClose"
    >
      <div style="padding: 24px 24px 30px 24px">
        <el-descriptions style="margin-bottom: 12px"
                         direction="vertical"
                         :title="data.name"
                         :column="5" size="medium"
        >
          <template slot="extra">
            <el-button type="primary" size="small">
              <i class="el-icon-sort"> 转移</i>
            </el-button>
            <el-button type="warning" size="small" @click="updateHandler">
              <i class="el-icon-edit"> 编辑</i>
            </el-button>
            <el-dropdown style="margin-left: 12px">
              <el-button size="small">
                <i class="el-icon-more"/>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleDelete(data.id)">
                  <i class="el-icon-delete"> 移除</i>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
          <el-descriptions-item label="客户名称">{{ data.customerName }}</el-descriptions-item>
          <el-descriptions-item label="职务">{{ data.post }}</el-descriptions-item>
          <el-descriptions-item label="手机">{{ data.mobile }}</el-descriptions-item>
          <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
        </el-descriptions>
        <el-tabs v-model="activeName" @tab-click="tabClick">
<!--          <el-tab-pane label="活动" name="activity">-->
<!--            <comment></comment>-->
<!--          </el-tab-pane>-->
          <el-tab-pane label="详细资料" name="detailInfo">
            <el-descriptions title="基本信息" :column="2">
              <el-descriptions-item label="姓名">{{ data.name }}</el-descriptions-item>
              <el-descriptions-item label="手机">{{ data.mobile }}</el-descriptions-item>
              <el-descriptions-item label="电话">{{ data.telephone }}</el-descriptions-item>
              <el-descriptions-item label="地址">{{ data.address }}</el-descriptions-item>
              <el-descriptions-item label="下次联系时间">{{ data.nextTime }}</el-descriptions-item>
              <el-descriptions-item label="备注">{{ data.remark }}</el-descriptions-item>
              <el-descriptions-item label="客户名称">{{ data.customerName }}</el-descriptions-item>
              <el-descriptions-item label="是否关键决策人">
                <dict-tag :options="dict.type.sys_crm_decision" :value="data.decisionStatus"/>
              </el-descriptions-item>
              <el-descriptions-item label="性别">
                <dict-tag :options="dict.type.sys_user_sex" :value="data.sexId"/>
              </el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="系统信息" :column="2" style="margin-top: 20px">
              <el-descriptions-item label="负责人">{{ data.ownerUserName }}</el-descriptions-item>
              <el-descriptions-item label="创建人">{{ data.createUserName }}</el-descriptions-item>
              <el-descriptions-item label="创建时间">{{ data.createTime }}</el-descriptions-item>
              <el-descriptions-item label="更新时间">{{ data.updateTime }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <el-tab-pane label="商机" name="business">
            <business-drawer-table :business-data="drawerTableData" @add-business="addBusiness"
                                   v-if="activeName == 'business'" :loading="drawerTableLoading"
            ></business-drawer-table>
          </el-tab-pane>
          <el-tab-pane label="附件" name="file">
            <file-drawer-table :file-list="drawerTableData" v-if="activeName == 'file'" :loading="drawerTableLoading"/>
          </el-tab-pane>
          <el-tab-pane label="操作记录" name="records">
            <crm-records :activity-list="drawerTableData" v-if="activeName == 'records'"/>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 对话框 -->
    <contacts-dialog :visible.sync="dialogVisible" :pk="pk"/>
  </div>
</template>

<script>
import {
  deleteBatchByIds,
  listBusiness,
  selectByPrimaryKey
} from '@/api/crm/Contacts'
import { listActionRecord } from '@/api/crm/ActionRecord'

import Comment from '@/components/CrmEdit/Index'
import BusinessDrawerTable from '@/components/Crm/Business/DrawerTable'
import ContactsDialog from './Create'
import FileDrawerTable from '@/components/Crm/File/DrawerTable'
import CrmRecords from '@/components/CrmRecords/Index'

export default {
  inheritAttrs: false,
  name: 'ContactsDrawer',
  components: {
    ContactsDialog,
    Comment,
    FileDrawerTable,
    BusinessDrawerTable,
    CrmRecords
  },
  dicts: ['sys_crm_decision', 'sys_user_sex'],
  props: {
    pk: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      dialogVisible: false, // 对话框懒加载
      drawerTableData: [], // 抽屉表格数据
      drawerTableLoading: false, // 抽屉表格加载动画
      activeName: 'detailInfo', // 标签页标志
      data: {
        name: '--'
      }, // 对象数据
      queryParams: {
        page: 1,
        limit: 15,
        search: '',
        searchId: null
      }
    }
  },
  // 在实例创建完成后被立即调用
  created() {

  },
  // 实例被挂在后调用
  mounted() {

  },
  // 方法
  methods: {
    // 抽屉打开方法
    onOpen() {
      if (this.pk != null) {
        selectByPrimaryKey(this.pk).then(res => {
          this.data = res.data
        })
      }
    },
    // 抽屉关闭回调
    onClose() {
      this.activeName = 'detailInfo'
      this.$emit('update:visible', false)
    },
    // 编辑按钮点击事件
    updateHandler() {
      this.dialogVisible = true
    },
    // 删除按钮点击事件
    handleDelete(id) {
      this.$modal.confirm('确认删除所选中数据?').then(() => {
        deleteBatchByIds(id)
      }).then(() => {
        this.$emit('ok')
        this.onClose()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    // 领取线索
    receiveHandler() {
      console.log('领取线索')
    },
    // 退回线索
    returnHandler() {
      console.log('退回线索')
    },
    // 线索转化为客户
    transferHandler() {
      this.$modal.confirm('是否将当前线索转为客户').then(() => {
        transfer(this.data.id)
          .then(() => {
            this.$emit('ok')
            this.onClose()
            this.$modal.msgSuccess('转客户成功')
          }).catch(() => {
        })
      }).catch(() => {
      })
    },
    // 标签页切换
    tabClick({ name }) {
      // 重置数据
      this.queryParams.searchId = this.data.id
      this.drawerTableLoading = true
      this.drawerTableData = []
      if (name == 'business') {
        // 查询联系人关联的商机
        listBusiness(this.queryParams).then(res => {
          this.drawerTableData = res.data.records
          this.drawerTableLoading = false
        }).catch(err => {
          this.drawerTableLoading = false
        })
      } else if (name == 'file') {
        this.drawerTableLoading = false
      } else if (name == 'records') {
        listActionRecord(4, this.data.id).then(res => {
          this.drawerTableData = res.data
        })
      }
    },
    // 添加商机
    addBusiness() {

    }
  }
}
</script>

<style>
.el-descriptions__title {
  font-size: 20px;
  font-weight: bold;
}

.el-descriptions-item__container {
  font-size: 16px !important;
}
</style>
